<template>
    <section>
        <el-col align="right">
            <div class="section">
                <el-button type="primary" plain @click="add">添加</el-button>
            </div>
        </el-col>


        <el-col id="el_tab" ref="el_tab" :span="24" style="padding-bottom: 0px; ">
            <el-tabs v-model="currentTab" type="card" @tab-click="handleTabClick">
                <el-tab-pane label="按层级" name="byLevel">

                    <el-row :gutter="20">
                        <div class="grid-content">
                            <el-row :gutter="20">
                                <el-col
                                        :span="5"
                                        class="checkItemsOne"
                                >
                                    <div id="div_level_1" class="">
                                        <ul id="sel_level_1" class="xp-ul">
                                            <li v-for="(item, index) in tableData"
                                                :id="item.key"
                                                :class="item.class"
                                                @click="toggleLevel1Select(index, item)">
                                                <span>{{item.check_item_three_order_number + '.&nbsp;' + item.value}}</span>

                                            </li>
                                        </ul>
                                    </div>
                                </el-col>
                                <el-col
                                        :span="6"
                                        class="checkItemsTwo"
                                >
                                    <div id="div_level_2" :class="visibleClass.level_2">
                                        <ul id="sel_level_2" class="xp-ul">
                                            <li v-for="(item, index) in level_2_list" :id="item.key"
                                                :class="item.class"
                                                @click="toggleLevel2Select(index, item)">
                                                <span>{{item.check_item_three_order_number + '.&nbsp;' + item.value}}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </el-col>
                                <el-col :span="10">
                                    <div id="div_level_3" :class="visibleClass.level_3">
                                        <ul id="sel_level_3" class="xp-ul">
                                            <li v-for="(item, index) in level_3_list" :id="item.key"
                                                :class="item.class"
                                                @click="toggleLevel3Select(index, item)">
                                                <span>{{item.check_item_three_order_number + '.&nbsp;' + item.value}}</span>
                                                <span style="color:orangered">{{'检查要点：' + item.point}}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="按关键字" name="byKey" >

                    <el-col :span="24" style="padding-bottom: 0px; ">
                        <el-form :inline="true" :model="filters" :rules="rules" ref="filters" label-width="80px">

                            <el-form-item prop="key">
                                <el-input
                                        require
                                        placeholder="检查项关键字"
                                        v-model.trim="filters.key">
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchInspectItems">搜索</el-button>
                            </el-form-item>

                        </el-form>
                    </el-col>

                    <el-table
                            :data="searchResult"
                            class="by-key-search"
                            stripe
                            v-loading="listLoading"
                            style="width: 100%;">

                        <el-table-column align="left" label="搜索结果">
                            <template slot-scope="scope">
                                <el-radio v-model="selected.search" :label="scope.row.key">
                                    <span>{{formatStar(scope.row.star_level) + scope.row.check_item_three_order_number + '.&nbsp;'
                                    + scope.row.value}}</span>
                                    <br>
                                    <span class="point">{{'检查要点：' + scope.row.point}}</span>
                                </el-radio>
                            </template>
                        </el-table-column>
                    </el-table>

                </el-tab-pane>
            </el-tabs>
        </el-col>
    </section>
</template>

<script>
    import * as api from '../../api/records_api'

    export default {
        data() {
            return {
                listLoading: false,
                currentTab: 'byLevel',
                //表格数据
                tableData: [],
                level_1_list: [],
                level_2_list: [],
                level_3_list: [],
                searchData: [],
                searchResult: [],
                filters: {
                    key: ''
                },
                rules: {
                    key: [
                        {required: true, message: '检查项关键字', trigger: 'blur'},
                    ],
                },
                visibleClass: {
                    level_2: 'hid',
                    level_3: 'hid'
                },
                selected: {
                    level_1: {},
                    level_2: {},
                    level_3: {},
                    search: {}
                }
            }
        },
        methods: {
            toggleLevel1Select(index, item) {
                if (item.class && item.class == 'xp-selected') {// 已选中，将去掉
                    this.unselectLevel1(index, item, 1);
                } else {// 未选中，将选中
                    this.selectLevel1(index, item);
                }
            },
            selectLevel1(index, item) {
                if (this.selected.level_1.key && this.selected.level_1.key.length > 0 && this.selected.level_1.key != item.key) {
                    this.unselectLevel1(this.selected.level_1.index, this.tableData[this.selected.level_1.index]);
                }

                this.selected.level_1 = {
                    index: index,
                    key: item.key
                };
                this.level_2_list = [];
                this.level_3_list = [];
                this.level_2_list = item.children;
                this.visibleClass.level_2 = 'show';
                item.class = 'xp-selected';
            },
            unselectLevel1(index, item, level) {
                if (this.selected.level_2.key && this.selected.level_2.key.length > 0) {
                    this.unselectLevel2(this.selected.level_2.index, this.level_2_list[this.selected.level_2.index], level);
                } else {
                    this.level_2_list = [];
                    this.level_3_list = [];
                    this.visibleClass.level_2 = 'hid';
                    this.visibleClass.level_3 = 'hid';
                }


                this.selected.level_1 = {};
                item.class = '';
            },
            toggleLevel2Select(index, item) {
                if (item.class && item.class == 'xp-selected') {// 已选中，将去掉
                    this.unselectLevel2(index, item, 2);
                } else {// 未选中，将选中
                    this.selectLevel2(index, item);
                }
            },
            selectLevel2(index, item) {
                if (this.selected.level_2.key && this.selected.level_2.key.length > 0 && this.selected.level_2.key != item.key) {
                    this.unselectLevel2(this.selected.level_2.index, this.level_2_list[this.selected.level_2.index], 2);
                }

                this.selected.level_2 = {
                    index: index,
                    key: item.key
                };
                this.level_3_list = [];
                this.level_3_list = item.children;
                this.visibleClass.level_3 = 'show';
                item.class = 'xp-selected';
            },
            unselectLevel2(index, item, level) {
                if (this.selected.level_3.key && this.selected.level_3.key.length > 0) {
                    this.unselectLevel3(this.selected.level_3.index, this.level_3_list[this.selected.level_3.index], level);
                }
                if (level && level == 1) {
                    this.level_2_list = [];
                    this.level_3_list = [];
                    this.visibleClass.level_2 = 'hid';
                    this.visibleClass.level_3 = 'hid';
                } else {
                    this.level_3_list = [];
                    this.visibleClass.level_3 = 'hid';
                }

                this.selected.level_2 = {};
                item.class = '';
            },
            toggleLevel3Select(index, item) {
                if (item.class && item.class == 'xp-selected') {// 已选中，将去掉
                    this.unselectLevel3(index, item, 3);
                } else {// 未选中，将选中
                    this.selectLevel3(index, item);
                }
            },
            selectLevel3(index, item) {
                if (this.selected.level_3.key && this.selected.level_3.key.length > 0 && this.selected.level_3.key != item.key) {
                    this.unselectLevel3(this.selected.level_3.index, this.level_3_list[this.selected.level_3.index], 3);
                }

                this.selected.level_3 = {
                    index: index,
                    key: item.key
                };
                item.class = 'xp-selected';
            },
            unselectLevel3(index, item, level) {
                if (level && level != 3) {
                    this.level_3_list = [];
                    this.visibleClass.level_3 = 'hid';
                }
                this.selected.level_3 = {};
                item.class = '';
            },
            formatStar(cnt) {
                switch (cnt) {
                    case '1':
                        return '★';
                    case '2':
                        return '★★';
                    case '3':
                        return '★★★';
                    case '0':
                    default:
                        return '';
                }
            },
            handleTabClick(tab, event) {
            },
            // 详情
            add() {
                if (this.currentTab == 'byLevel') {
                    if (this.selected.level_3 && this.selected.level_3.key && this.selected.level_3.key.length > 0) {
                        let val3 = this.level_3_list.find((value, index, arr) => {
                            return value.key == this.selected.level_3.key;
                        });
                        let val2 = this.level_2_list.find((value, index, arr) => {
                            return value.key == this.selected.level_2.key;
                        });
                        let val1 = this.tableData.find((value, index, arr) => {
                            return value.key == this.selected.level_1.key;
                        });

                        let result = {
                            check_item_one_id: val1.key,
                            check_item_one: val1.value,
                            check_item_two_id: val2.key,
                            check_item_two: val2.value,
                            check_item_three_id: val3.key,
                            check_item_three: val3.value,
                            star_level: val3.star_level,
                            check_item_three_order_number: val3.check_item_three_order_number,
                            check_item_three_item_order: val3.order,
                        };
                        this.reset();
                        this.$emit('closeDialog', result);
                    } else {
                        this.$message.error("请在层级里面选择一条检查项");
                    }

                } else {
                    if (this.selected.search && this.selected.search.length > 0) {
                        let val3 = this.searchResult.find((value, index, arr) => {
                            return value.key == this.selected.search;
                        });
                        let val1 = this.tableData.find((value, index, arr) => {
                            return value.key == val3.parent_parent;
                        });

                        let val2 = val1.children.find((value, index, arr) => {
                            return value.key == val3.parent;
                        });
                        let result = {
                            check_item_one_id: val1.key,
                            check_item_one: val1.value,
                            check_item_two_id: val2.key,
                            check_item_two: val2.value,
                            check_item_three_id: val3.key,
                            check_item_three: val3.value,
                            check_item_three_order_number: val3.check_item_three_order_number,
                            check_item_three_item_order: val3.order
                        };
                        this.reset();
                        this.$emit('closeDialog', result);
                    } else {
                        this.$message.error("请在搜索结果里面选择一条检查项");
                    }
                }
            },
            reset() {
                if (this.selected.level_1 && this.selected.level_1.key) {
                    this.unselectLevel1(this.selected.level_1.index, this.tableData[this.selected.level_1.index], 1);
                }

                this.searchResult = [];
                this.selected.search = {};
            },
            searchInspectItems() {
                this.$refs['filters'].validate((valid) => {
                    if (valid) {
                        this.searchResult = [];
                        this.listLoading = true;
                        let key = this.filters.key;
                        if (this.searchData.length > 0) {
                            for (let i = 0; i < this.searchData.length; i++) {
                                let item = this.searchData[i];
                                if (item.value.indexOf(key) > -1) {
                                    this.searchResult.push(item);
                                }
                            }
                        }
                        this.listLoading = false;
                    }
                });
            },

            getInspectItems() {

                this.listLoading = true;  //显示loading

                let params = {};

                api.getInspectItems(params).then((res) => {
                    if (res.data.status == 200) {
                        this.listLoading = false;  //隐藏loading

                        let result = JSON.parse(res.data.datas);
                        this.formatData(result);
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                });
            },
            formatData(data) {
                this.tableData = [];
                this.searchData = [];
                if (data && data.length > 0) {
                    for (let i = 0; i < data.length; i++) {
                        let level_1_data = data[i];
                        let level_1_item = {
                            key: level_1_data.id,
                            value: level_1_data.item_name,
                            check_item_three_order_number: level_1_data.item_order_number,
                            star_level: level_1_data.star_level,
                            order: parseInt(level_1_data.item_order),
                            class: '',
                            children: []
                        };
                        if (level_1_data.child_dto_list && level_1_data.child_dto_list.length > 0) {
                            for (let j = 0; j < level_1_data.child_dto_list.length; j++) {
                                let level_2_data = level_1_data.child_dto_list[j];
                                let level_2_item = {
                                    key: level_2_data.id,
                                    value: level_2_data.item_name,
                                    check_item_three_order_number: level_2_data.item_order_number,
                                    star_level: level_2_data.star_level,
                                    order: parseInt(level_2_data.item_order),
                                    parent: level_1_item.key,
                                    class: '',
                                    children: []
                                };


                                if (level_2_data.child_dto_list && level_2_data.child_dto_list.length > 0) {
                                    for (let k = 0; k < level_2_data.child_dto_list.length; k++) {
                                        let level_3_data = level_2_data.child_dto_list[k];
                                        let level_3_item = {
                                            key: level_3_data.id,
                                            value: level_3_data.item_name,
                                            check_item_three_order_number: level_3_data.item_order_number,
                                            star_level: level_3_data.star_level,
                                            order: parseInt(level_3_data.item_order),
                                            class: '',
                                            parent: level_2_item.key,
                                            point: level_3_data.item_main_point
                                        };

                                        let search_item = {
                                            key: level_3_data.id,
                                            value: level_3_data.item_name,
                                            check_item_three_order_number: level_3_data.item_order_number,
                                            order: parseInt(level_3_data.item_order),
                                            star_level: level_3_data.star_level,
                                            parent: level_2_data.id,
                                            parent_parent: level_1_data.id,
                                            point: level_3_data.item_main_point
                                        };
                                        this.searchData.push(search_item);

                                        level_2_item.children.push(level_3_item);
                                    }
                                }

                                level_2_item.children = level_2_item.children.sort(function (a, b) {
                                    return a.order - b.order;
                                });
                                level_1_item.children.push(level_2_item);
                            }
                        }

                        level_1_item.children = level_1_item.children.sort(function (a, b) {
                            return a.order - b.order;
                        });
                        this.tableData.push(level_1_item);

                        this.tableData = this.tableData.sort(function (a, b) {
                            return a.order - b.order;
                        });
                    }
                }
            },
            //初始化页面
            initData() {
                if (this.tableData && this.tableData.length > 0) {
                    return;
                }
                this.getInspectItems();
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>

<style scoped>

    .hid {
        display: none;
    }

    .show {

    }

    .section {
        margin-top: 15px;
        padding-bottom: 15px;
    }

    #div_level_3,
    #div_level_2,
    #div_level_1 {
        margin: 20px;
        /*float: left;*/
    }

    .xp-ul {
        height: 589px;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-y: scroll;
        overflow-x: hidden;
        border: solid 1px #e8e8e8;
        background-color: #f7f7f7;
    }

    .xp-ul li {
        color: #666;
        list-style: none;
        line-height: 26px;
        cursor: pointer;
        margin: 5px 0;
        padding: 12px 20px;
    }

    .xp-ul li span {

        padding: 0 10px;
    }

    .xp-ul li.xp-selected {
        background-color: #e5e5e5;
        font-weight: bold;
    }

    .point{
        margin:8px 0 0 25px;
        display:inline-table;
        line-height:20px;
    }
    .checkItemsTwo{
        min-width: 370px;
    }
    .checkItemsOne{
        min-width: 320px;
    }
    .grid-content{
        min-width: 1200px;
    }
</style>
<style>
   .by-key-search .el-radio{
        white-space:normal;
    }
</style>
